import React, { Component } from 'react'
import { Card,Button,List, message,Image} from 'antd'
import { ArrowLeftOutlined, } from '@ant-design/icons';
import { connect } from 'react-redux';
import { reqSearchContentById} from '../../api'
import { saveTeacherAction } from '../../redux/action_creators/user_action';
import { IMAGE_URL } from '../../config';
import dayjs from 'dayjs';
const { Item } =List;

@connect(
    state=>({
        course:state.course
    }),
    {
        saveTeacherList:saveTeacherAction
    }
)
 class Detail extends Component {
     state = {
         id:'',
         courseRoom:'',
         userNum:'',
         courseType:'',
         courseDesc:'',
         courseDate:'',
         course:'',
         birthday:'',
         title:'',
         createTime:'',
         phone:'',
         email:'',
         userId:'',
         price:'',
         isLoading:true
     }
     componentDidMount(){
         //从redux中获取
         const {curriculumList } = this.props.course;
        const {id } = this.props.match.params;
        if(curriculumList.length){
            let curriculumDetail = curriculumList.find((item)=>(item.id === parseInt(id)))
            this.setState({
                ...curriculumDetail,
                isLoading:false,
            })
        }else{
            this.getContentById(id)
        }
     }
     getContentById = async (id) =>{
         let result = await reqSearchContentById(id);
         const {code,msg,data } = result;
         if(code === 200){
              this.setState({...data[0],isLoading:false})
        }else   message.error(msg,1)
     }

    render() {
        const  { courseNum,courseName,username,userNum,courseRoom,courseDate,courseWeek,courseTime,
        courseType,attributeName,courseDesc,createTime,courseImg,stopTime,isLoading,price} = this.state
        return (
            <div>
                <Card 
                    title={
                        <div className="left-top">
                            <Button 
                                type="link" 
                                size="small"
                                onClick={()=>{this.props.history.goBack()}} 
                            >
                                <ArrowLeftOutlined className="iconSize"/>
                            </Button>
                            <span>课程信息详情</span>
                        </div>
                    }
                >
                    <List 
                        loading={isLoading}
                        bordered
                        size={'small'}
                    >
                        <Item>
                            <div><span className="product-name">课程编号：</span><span>{courseNum}</span></div>  
                        </Item>
                        <Item>
                            <div><span className="product-name">课程名称：</span><span>{courseName}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">授课地点：</span><span>{courseRoom}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">授课讲师：</span><span>{username}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">讲师工号：</span><span>{userNum}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">课程价格(元)：</span><span>{price}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">课程日期：</span><span>{courseDate.replace(/,/g, " 至 ")}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">课程周期：</span><span>{courseWeek}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">课程时间：</span><span>{courseTime ? courseTime.replace(/,/g, " 至 ") : ''}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">课程类型：</span><span>{courseType}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">课程属性：</span><span>{attributeName}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">课程描述：</span><span  dangerouslySetInnerHTML={{__html:courseDesc}}></span></div>
                        </Item>
                         <Item>
                            <div><span className="product-name">截止时间：</span><span>{dayjs(stopTime).format('YYYY年MM月DD日 HH:mm:ss')}</span></div>
                        </Item>
                        <Item>
                            <div><span className="product-name">创建时间：</span><span>{dayjs(createTime).format('YYYY年MM月DD日 HH:mm:ss')}</span></div>
                        </Item>
                        <Item >
                            <div> 
                                <span className="product-name">课程照片：</span> 
                                <span>{courseImg?<Image  width={200} src={IMAGE_URL+courseImg} alt="课程图片"/>:'' }</span>
                            </div>
                        </Item>
                    </List>
                </Card>
            </div>
        )
    }
}
export default Detail;